<template>
  <div class="about">
    <table border class="list_table">
      <tr v-for="formItem in forms" :key="formItem.id">
        <td>{{formItem.id}}</td>
        <td>{{formItem.name}}</td>
        <td>
          <a-button type="primary" @click="() => handleUpdate(formItem.id)">编辑</a-button>
          <a-button @click="() => handleDelete(formItem.id)">删除</a-button>
          <a-button @click="() => handleFillIn(formItem.id)">填写</a-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import FormTempleteStore from '../tool/FormTempleteStore'
export default {
  data(){
    return {
      forms: []
    }
  },
  created(){
    this.getFormListData();
  },
  methods: {
    getFormListData() {
      FormTempleteStore.readAll().then((data) => {
        console.log(data)
        this.forms = data;
      })
    },
    handleUpdate(formId){
      this.$router.push({
        name: 'FormMake',
        params: { formId }
      })
    },
    handleDelete(formId){
      FormTempleteStore.remove(formId).then((res) => {
        this.$message.success(res)
        this.getFormListData()
      })
    },
    handleFillIn(formId) {
      this.$router.push({
        name: 'Form',
        query: { formId }
      })
    }
  }
}
</script>

<style>
.list_table {
  width: 100%;
}
</style>